<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        * {
        	padding: 0;
        	margin: 0;
        }
        ul {
        	list-style: none;
        }
		div.car {
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px;
			position: relative;
		}
		div.car a.open-l {
			width: 24px;
			height: 36px;
		    position: absolute;
		    left: 0;
		    top: 50%;
		    margin-top: -12px;
			background:  url(images/left.png) center center no-repeat;
		}
		div.car a.open-r {
			width: 24px;
			height: 36px;
		    position: absolute;
		   right: 0;
		    top: 50%;
		    margin-top: -12px;
			background:  url(images/right.png) center center no-repeat;
		}
		ul {
			width: 160px;
			height: 13px;
			
			position: absolute;
			bottom: 10px;
			left: 50%;
			margin-left: -130px;
			box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
		}
		ul li {
			width: 12px;
			height: 12px;
			background-color: rgba(255, 255, 255, 0.3);
			float: left;
			margin-right: 17px;
			border-radius: 6px;
		}
		ul li:last-child {
			margin: 0;
			background-color: rgb(255, 245, 245);
		}


        </style>
    </head>
    <body>
    <div class="car">
    	<img src="images/taobao.jpg" height="280" width="520" alt="">
    	<a class="open-l" href=""></a>
    	<a class="open-r" href=""></a>
    	<ul>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	</ul>
    	
    </div>
    </body>
</html>